<template>
  <div class="employee-container">

    <div class="tableBar" style="margin: 10px 55px ">
      <el-form :inline="true" :model="employeePageQueryDTO" class="demo-form-inline">
        <el-form-item label="员工编号" style="margin: 0 10px">
          <el-input
            v-model="employeePageQueryDTO.id"
            style="width: 210px"
            placeholder="员工编号"
            clearable
            @clear="getEmpList"
            @keyup.enter.native="getEmpList"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工名字" style="margin: 0 10px">
          <el-input
            v-model="employeePageQueryDTO.empName"
            style="width: 120px"
            placeholder="员工名字"
            clearable
            @clear="getEmpList"
            @keyup.enter.native="getEmpList"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工电话" style="margin: 0 10px">
          <el-input
            v-model="employeePageQueryDTO.phone"
            style="width: 145px"
            placeholder="员工电话"
            clearable
            @clear="getEmpList"
            @keyup.enter.native="getEmpList"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="employeePageQueryDTO">
        <el-form-item label="认证状态" style="margin: 0 10px">
          <el-select
            v-model="employeePageQueryDTO.isIdentify"
            style="width: 155px"
            placeholder="请选择认证状态"
            clearable
            @clear="getEmpList"
            @keyup.enter.native="getEmpList">
            <el-option label="未认证" value="0"></el-option>
            <el-option label="已认证" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="date2" label="入职时间" style="margin: 0 10px">
          <el-date-picker
            v-model="employeePageQueryDTO.beginTime"
            style="width: 190px"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            clearable
            @change="changeBeginDate">
          </el-date-picker>
          <span> - </span>
          <el-date-picker
            v-model="employeePageQueryDTO.endTime"
            style="width: 190px"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            clearable
            @change="changeEndDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin: 0 10px">
          <el-button type="primary" @click="getEmpList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 95%;margin:0 auto"
        @selection-change="handleSelectionChange"
        border
        stripe
      >
        <el-table-column
          type="selection"
          width="55"
          align="center">
        </el-table-column>
        <el-table-column
          label="员工编号"
          width="200"
          align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          label="员工头像"
          width="100"
          align="center">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" min-width="70" height="70"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="empName"
          label="员工姓名"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="50"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.gender === 0 ? '女' : '男' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="员工电话"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="员工生日"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="idNo"
          label="员工身份证号"
          width="200"
          align="center">
        </el-table-column>
        <el-table-column
          prop="isIdentify"
          label="认证状态"
          width="80"
          align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.isIdentify === 0 ? 'warning' : 'success'"
              disable-transitions>
              {{ scope.row.isIdentify === 0 ? '未认证' : '已认证' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="joinTime"
          label="入职时间"
          width="120"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.joinTime === null ? '-' : scope.row.joinTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <router-link :to="'/employee/edit/'+scope.row.id">
              <el-button
                style="margin:  1px 0 0  10px "
                size="mini"
                type="primary">
                编辑
              </el-button>
            </router-link>
            <el-button
              style="margin: 1px 0 1px 10px "
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBar">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="employeePageQueryDTO.current"
          :page-sizes="[4, 8, 12,16]"
          :page-size="employeePageQueryDTO.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="width: 30% ;margin: 5px auto">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import emp from '@/api/employee'

export default {
  data() {
    return {
      dialogFormVisible: false,
      empPage: [],
      tableData: [],
      multipleSelection: [],
      deleteBatchIds: [],
      total: 0,
      employeePageQueryDTO: {
        empName: '',
        phone: '',
        isIdentify: '',
        beginTime: '',
        endTime: '',
        current: 1,
        pageSize: 4
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    changeBeginDate(val) {
      this.employeePageQueryDTO.beginTime = val
      this.getEmpList()
    },
    changeEndDate(val) {
      this.employeePageQueryDTO.endTime = val
      this.getEmpList()
    },
    handleDelete(index, row) {
      this.$confirm('是否要删除该条信息', '删除', {
        distinguishCancelAndClose: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定删除'
      })
        .then(() => {
          emp.deleteEmp(row.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          })
          this.employeePageQueryDTO.current = 1
          this.init()
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    handleBatchDelete(index, row) {
      if (this.deleteBatchIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '未选择删除对象'
        })
        return
      } else {
        this.$confirm('是否要删除该条信息', '删除', {
          distinguishCancelAndClose: true,
          cancelButtonText: '取消',
          confirmButtonText: '确定删除'
        })
          .then(() => {
            emp.deleteBatchEmp(this.deleteBatchIds).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              this.current = 1
              this.init()
            })
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
      }
    },
    init() {
      this.getEmpList()
    },
    handleCurrentChange(val) {
      this.employeePageQueryDTO.current = val
      this.getEmpList()
    },
    handleSizeChange(val) {
      console.log(val)
      this.employeePageQueryDTO.pageSize = val
      this.getEmpList()
    },
    getEmpList() {
      emp.getEmpPage(this.employeePageQueryDTO).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      }).catch(err => {
        console.log(err, 'err')
        this.$message.error('请求出错了：' + err.message)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.deleteBatchIds = []
      this.multipleSelection.forEach(row => {
        this.deleteBatchIds.push(row.id)
      })
      console.log(this.deleteBatchIds)
    }
  }
}
</script>

